<!-- 等待界面 -->
<template>
    <view class="pending">
        <!-- 顶部全部清除 -->
        <view class="pending-bottom">
            <view class="pending-bottom-left">累计数为：0</view>
            <view class="pending-bottom-right" @click="clearAll">清除所有数据</view>
        </view>

        <!-- 数据显示 -->
        <!-- 物料信息 -->
        <view class="material">
            <scroll-view  v-show="isPending" scroll-top="0" scroll-y="true" class="scroll-Y" style="height: 300px;  background-color: antiquewhite;">

                <slot name="material">
                    
                </slot>
            </scroll-view>
            <!-- 条码信息 -->
            <scroll-view  v-show="!isPending" scroll-top="0" scroll-y="true" class="scroll-Y" style="height: 300px;  background-color: antiquewhite;">

                <slot name="barcode">
                      <view>
                        <view>条码名称</view>
                        <view>条码编码</view>
                        <view>条码数量</view>
                        <view>条码单位</view>
                    </view>
                    <view>
                        <view>条码名称</view>
                        <view>条码编码</view>
                        <view>条码数量</view>
                        <view>条码单位</view>
                    </view>
                    <view>
                        <view>条码名称</view>
                        <view>条码编码</view>
                        <view>条码数量</view>
                        <view>条码单位</view>
                    </view>
                     <view>
                        <view>条码名称</view>
                        <view>条码编码</view>
                        <view>条码数量</view>
                        <view>条码单位</view>
                    </view>
                    <view>
                        <view>条码名称</view>
                        <view>条码编码</view>
                        <view>条码数量</view>
                        <view>条码单位</view>   
                    </view>
                    <view>
                        <view>条码名称</view>
                        <view>条码编码</view>
                        <view>条码数量</view>
                        <view>条码单位</view>
                    </view> <view>
                        <view>条码名称</view>
                        <view>条码编码</view>
                        <view>条码数量</view>
                        <view>条码单位</view>
                    </view>
                    <view>
                        <view>条码名称</view>
                        <view>条码编码</view>
                        <view>条码数量</view>
                        <view>条码单位</view>
                    </view>
                    <view>
                        <view>条码名称</view>
                        <view>条码编码</view>
                        <view>条码数量</view>
                        <view>条码单位</view>
                    </view>
                </slot>
            </scroll-view>
        </view>




        <!-- 底部按钮 -->
        <view class="bottom">
            <view class="bottom-button">
                <view class="bottom-button-ok" :style="{backgroundColor: isPending ? 'hsl(211, 88%, 77%)' : 'hsl(210, 100%, 86%)',borderRadius: '10px'} " @click="isPending = true">物料信息</view>
            </view>
            <view class="bottom-button">
                <view class="bottom-button-ok" :style="  {backgroundColor: !isPending ? 'hsl(211, 88%, 77%)' : 'hsl(210, 100%, 86%)' ,borderRadius: '10px'} " @click="isPending = false">条码信息</view>

            </view>
        </view>

    </view>
</template>

<script lang="ts" setup>
// 这里可以添加待处理的逻辑
import { ref } from 'vue'

// 定义一个响应式变量，用于控制是否显示等待界面
const isPending = ref(true);
const emit = defineEmits(['clearAll'])
// 清除所有数据
const clearAll = () => {
    emit('clearAll')
}


</script>

<style scoped>
.pending {
    width: 96%;
    /* height: 100px; */
    background-color: hsl(240, 2%, 92%);
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;

}

.pending-bottom {
    display: flex;
    border-bottom: 1px solid #141414;
}

.pending-bottom-left {
    /* flex: 1; */
    margin-left: 20px;
    text-align: left;

}

.pending-bottom-right {

    /* flex: 1; */
    width: 40%;
    margin-right: 10px;
    margin-left: auto;

    background-color: rgb(234, 106, 106);
    text-align: center;
    border-radius: 20px;
}

.material {
    /* background-color: aliceblue; */
    margin: 10px 10px;
}

/* 底部两个按钮 */
.bottom {
    display: flex;
    justify-content: space-between;
    margin: 10px 10px;
}

.bottom-button {
    width: 40%;
    height: 30px;
    text-align: center;
    line-height: 30px;
    border-radius: 20px;
}
</style>